<template>
  <d2-container :filename="filename" better-scroll>
    <el-row :gutter="20">
      <el-col :span="6">
        <el-card>
          <div slot="header" class="clearfix">
            <span>系统菜单</span>
            <el-button
              style="float: right;"
              @click="createChildren('Parent')"
              type="primary"
              size="mini"
              v-has="'addParentMenu'"
              icon="el-icon-plus"
              >添加根节点菜单</el-button
            >
          </div>
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText"
            clearable=""
          >
          </el-input>

          <el-tree
            class="filter-tree"
            :data="treeData"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree2"
            @node-click="handleNodeClick"
            v-loading="treeloading"
          >
            <span
              class="custom-tree-node"
              slot-scope="{ data }"
              style="margin:10px"
            >
              <span>
                <i :class="'fa fa-' + data.icon"></i
                ><span style="margin-left:8px;">{{ data.title }}</span>
              </span>
            </span>
          </el-tree>
        </el-card>
      </el-col>
      <el-card shadow="always" v-if="checkRow.id > 0">
        <el-row>当前菜单:{{ checkRow.title }}</el-row>
        <el-tabs v-model="activeName" style="margin-top:20px">
          <el-tab-pane label="菜单属性" name="first">
            <el-row>
              <el-row>
                <el-button
                  type="primary"
                  @click="updateRow()"
                  v-has="'createOrUpdate'"
                  :loading="updateLoading"
                  icon="el-icon-document"
                  >保存</el-button
                >
                <el-button
                  type="primary"
                  @click="createChildren('Children')"
                  v-has="'addChildrenMenu'"
                  icon="el-icon-plus"
                  >添加子菜单</el-button
                >
                <el-button
                  type="danger"
                  @click="deleteRow()"
                  v-has="'deleteMenu'"
                  icon="el-icon-delete"
                  :loading="deleteLoading"
                  >删除</el-button
                >
              </el-row>

              <el-row style="margin-top:30px; width:50%">
                <el-form
                  label-width="80px"
                  ref="updateForm"
                  :rules="rules"
                  :model="checkRow"
                >
                  <el-form-item label="父级菜单">
                    <el-input v-model="parentTitle" disabled="" />
                  </el-form-item>
                  <el-form-item label="菜单名称" prop="title">
                    <el-input v-model="checkRow.title" clearable />
                  </el-form-item>
                  <el-form-item label="菜单路径" prop="path">
                    <el-input v-model="checkRow.path" clearable />
                  </el-form-item>
                  <el-form-item label="菜单图标" prop="icon">
                    <el-input v-model="checkRow.icon" disabled>
                      <template slot="append">
                        <el-button
                          type="primary"
                          icon="el-icon-search"
                          @click="showIcon()"
                        ></el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-form>
              </el-row>
            </el-row>
          </el-tab-pane>
          <el-tab-pane
            label="菜单权限"
            name="second"
            v-if="checkRow.children == null"
          >
            <el-row>
              <el-form
                label-width="80px"
                ref="buttonForm"
                :rules="buttonRules"
                :model="buttonData"
                :inline="true"
              >
                <el-form-item label="权限名称" prop="buttonName">
                  <el-input v-model="buttonData.buttonName"></el-input>
                </el-form-item>
                <el-form-item label="权限代码" prop="buttonCode">
                  <el-input v-model="buttonData.buttonCode"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="addButton()"
                    :loading="addButtonLoading"
                    v-has="'addButton'"
                    icon="el-icon-plus"
                    >添加权限</el-button
                  >
                </el-form-item>
              </el-form>
            </el-row>
            <el-row style="margin-top:20px">
              <el-table
                :data="tableData"
                size="mini"
                element-loading-text="加载中"
                v-loading="tableLoading"
              >
                <el-table-column type="index"></el-table-column>
                <el-table-column label="操作" width="150">
                  <template slot-scope="scope">
                    <div>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="删除"
                        placement="top-start"
                      >
                        <el-button
                          type="danger"
                          size="mini"
                          icon="el-icon-delete"
                          @click="deleteButton(scope.row)"
                          v-has="'deleteButton'"
                          circle
                        ></el-button>
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="保存"
                        placement="top-start"
                      >
                        <el-button
                          type="primary"
                          icon="el-icon-document"
                          @click="updateButton(scope.row)"
                          v-has="'updateButton'"
                          size="mini"
                          circle
                        ></el-button>
                      </el-tooltip>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="权限名称">
                  <template slot-scope="sope">
                    <el-input v-model="sope.row.name" />
                  </template>
                </el-table-column>
                <el-table-column prop="code" label="权限代码">
                  <template slot-scope="sope">
                    <el-input v-model="sope.row.code" />
                  </template>
                </el-table-column>
              </el-table>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-row>
    <createModel ref="createModel" @fromvisible="getMenuAll"></createModel>
    <iconModel ref="iconModel" @fromvisible="getIcon"></iconModel>
  </d2-container>
</template>

<script>
import { GetMenuListAll, CreateOrUpdate, DeleteMenu, CreateOrUpdateButton, GetMenuButtonByMenuId, DeleteButton } from '@api/systemManage/menuManage'
import createModel from '@/pages/systemManage/menuManage/createModel'
import iconModel from '@/pages/icon'
// import { fail } from 'assert'

export default {
  name: 'menuManage',
  inject: ['reload'],
  components: { createModel, iconModel },
  data () {
    return {
      tableData: [],
      tableLoading: false,
      buttonData:
      {
        menuId: 0,
        buttonCode: '',
        buttonName: ''
      },
      buttonRules: {
        buttonCode: [
          { required: true, message: '请输入权限代码', trigger: 'blur' }
        ],
        buttonName: [
          { required: true, message: '请输入权限名称', trigger: 'blur' }
        ]
      },
      addButtonLoading: false,
      filename: __filename,
      filterText: '',
      activeName: 'first',
      updateLoading: false,
      deleteLoading: false,
      parentId: 0,
      parentTitle: '无',
      createRow: {
        id: 0,
        parentId: 0,
        parentTitle: '无',
        title: '',
        path: '',
        icon: ''
      },
      checkRow: {
        id: 0,
        parentId: 0,
        title: '',
        path: '',
        icon: ''
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      rules: {
        title: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' }
        ],
        path: [
          { required: true, message: '请输入菜单路径', trigger: 'blur' }
        ],
        icon: [
          { required: true, message: '请输入菜单图标', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    filterText (val) {
      this.$refs.tree2.filter(val)
    }
  },
  created () {
    this.getMenuAll()
  },
  methods: {
    // 删除权限
    deleteButton (value) {
      this.$confirm('是否删除[' + value.buttonName + ']权限?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteButton(value.id).then(res => {
          if (res.success) {
            this.$notify({
              title: '提示',
              message: '删除成功',
              type: 'success'

            })

            this.getMenuButtonBuMenuId()
          }
        })
      })
    },
    // 修改权限
    updateButton (value) {
      if (value.code.trim() === '') {
        this.$message({
          message: '权限代码不能为空',
          type: 'warning'
        })
        return
      }
      if (value.name.trim() === '') {
        this.$message({
          message: '权限名称不能为空',
          type: 'warning'
        })
        return
      }
      var data = {
        id: value.id,
        MenuId: value.parentId,
        buttonCode: value.code,
        buttonName: value.name
      }
      CreateOrUpdateButton(data).then(res => {
        if (res.success) {
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success'

          })

          this.getMenuButtonBuMenuId()
        }
      })
    },
    // 添加权限
    addButton () {
      this.$refs.buttonForm.validate((valid) => {
        if (valid) {
          this.addButtonLoading = true
          CreateOrUpdateButton(this.buttonData).then(res => {
            this.addButtonLoading = false

            if (res.success) {
              this.$notify({
                title: '成功',
                message: '添加成功',
                type: 'success'

              })

              this.getMenuButtonBuMenuId()
              this.buttonData.buttonCode = ''
              this.buttonData.buttonName = ''
            }
          })
        }
      })
    },
    showIcon () {
      this.$refs.iconModel.show()
    },
    getIcon (value) {
      this.checkRow.icon = value
    },
    // 新建菜单
    createChildren (value) {
      this.createRow.parentId = value === 'Parent' ? '0' : this.checkRow.id
      this.createRow.parentTitle = value === 'Parent' ? '无' : this.checkRow.title
      this.createRow.id = 0
      this.createRow.icon = ''
      this.createRow.title = ''
      this.createRow.path = ''
      this.$refs.createModel.show(this.createRow)
    },
    // 删除菜单
    deleteRow () {
      if (this.checkRow.children != null) {
        this.$message({
          message: '菜单[' + this.checkRow.title + ']还有子级菜单,不能删除',
          type: 'warning'
        })
        return
      }
      this.$confirm('是否删除菜单[' + this.checkRow.title + ']?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteLoading = true
        DeleteMenu(this.checkRow.id).then(res => {
          if (res.success) {
            this.$notify({
              title: '提示',
              message: '删除成功',
              type: 'success'

            })
            this.deleteLoading = false
            this.reload()
          }
        })
      }).catch(() => {

      })
    },
    // 修改菜单
    updateRow () {
      this.$refs.updateForm.validate((valid) => {
        if (valid) {
          this.updateLoading = true
          CreateOrUpdate(this.checkRow).then(res => {
            if (res.success) {
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success'

              })
              this.updateLoading = false
            }
          })
        }
      })
    },
    // 获取菜单树
    getMenuAll () {
      this.treeloading = true
      GetMenuListAll().then(res => {
        this.treeloading = false
        this.treeData = res.result.items
      })
    },
    filterNode (value, data) {
      if (!value) return true
      return data.title.indexOf(value) !== -1
    },
    // 获取选中行数据及起父级Id和名称
    handleNodeClick (data) {
      this.checkRow = data
      this.buttonData.menuId = data.id
      var res = this.treeData.find(
        e => e.id === data.parentId
      )
      this.getMenuButtonBuMenuId()
      if (res === undefined) {
        this.parentTitle = '无'
        this.parentId = 0
      } else {
        this.parentTitle = res.title
        this.parentId = res.id
      }
    },
    // 获取菜单权限
    getMenuButtonBuMenuId () {
      this.tableLoading = true
      GetMenuButtonByMenuId(this.checkRow.id).then(res => {
        this.tableData = []
        this.tableLoading = false

        if (res.success) {
          this.tableData = res.result.items
        }
      })
    }
  }
}
</script>
